<template>
    <div class="flex justify-center items-center h-full">
        <form class="space-y-4 p-10" @submit.prevent="login">
            <div>
                <input v-model="account" id="account" type="text" placeholder="账号" class="from-input" />
            </div>
            <div>
                <input v-model="password" type="password" placeholder="密码" class="from-input" />
            </div>
            <div class="flex justify-center">
                <button class="bg-gradient-to-r from-red-600 to-red-400 text-white px-4 py-2">登录</button>
            </div>
            <div class="flex justify-center">
                <router-link to="/register" class="text-center text-blue-500 hover:text-blue-300">
                    没有账号 去注册
                </router-link>
            </div>
        </form>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
    data: () => ({
        account: '',
        password: '',
    }),

    methods: {
        ...mapActions(['getUser']),
        login() {
            const { account, password } = this
            this.getUser({ http: this.$http, query: { account, password } })
        },
    },
}
</script>

<style></style>
